{% if run %}
    {% if fullWidth %}
        {% set editorHeight = 'calc(50vh - 2em)' %}
    {% else %}
        {% set editorHeight = 'calc(100vh - 4em)' %}
    {% endif %}
{% else %}
    {% set editorHeight = '100vh' %}
{% endif %}
<!doctype html>
<html lang="{{ language }}" class="notranslate" translate="no">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap">
        <link rel="stylesheet" href="{{static(generated_css_file)}}">
        <link rel="stylesheet" href="{{static('/css/additional.css')}}">
        <link rel="stylesheet" href="{{static('/fontawesome/css/all.min.css')}}"/>
    </head>
    <body class="flex flex-col gap-2 h-screen" dir="{{ g.dir }}">
        <div id="editor_area" class="relative grid grid-cols-1 {% if run and not fullWidth %}grid-cols-2{% endif %} md:grid-flow-row-dense gap-2">
            <div class="flex flex-col order-1 relative" id="code_editor" style="height: {{ editorHeight }};">
                <div id="editor" style="background: #272822; font-size:0.95em; color: white" blurred="false" class="h-full w-full flex-1 text-lg rounded min-h-0 overflow-hidden fixed-editor-height" {% if readOnly %}data-readonly="true"{% endif %}></div>
                <div id="errorbox"
                  class="flex-0 z-20 mt-0 bg-red-100 border-t-4 border-red-500 rounded-b text-red-900 px-4 py-3 shadow-md" role="alert"
                  style="display: none;">
                  <p class="close-dialog" onclick="hedyApp.error.hide ()"><i class="fa-solid fa-xmark"></i></p>
                  <div class="flex">
                    <div class="py-1 flex items-center">
                      <svg class="fill-current h-6 w-6 text-red-500 ltr:mr-4 rtl:ml-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path
                          d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
                      </svg>
                    </div>
                    <div>
                      <p class="details text-sm" data-cy="error_details">An error occurred.</p>
                    </div>
                  </div>
                </div>
                <div id="warningbox"
                  class="flex-0 z-20 mt-0 bg-yellow-100 border-t-4 border-yellow-500 rounded-b text-yellow-900 px-4 py-3 shadow-md"
                  role="alert" style="display: none;">
                  <p class="close-dialog" onclick="hedyApp.error.hide ()"><i class="fa-solid fa-xmark"></i></p>
                  <div class="flex">
                    <div class="py-1">
                        <div id="warningbox_icon">
                            <svg class="fill-current h-6 w-6 text-yellow-500 ltr:mr-4 rtl:ml-4" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20">
                        <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
                      </svg>
                        </div>
                    </div>
                    <div>
                      <p class="details text-sm">An error occurred.</p>
                    </div>
                  </div>
                </div>
                <div id="okbox"
                  class="flex-0 z-20 mt-0 bg-green-100 border-t-4 border-green-500 rounded-b text-green-900 px-4 py-3 shadow-md"
                  role="alert" style="display: none;">
                  <div class="flex">
                    <div class="flex w-full justify-between items-center">
                      <p class="caption font-bold">Success</p>
                    </div>
                  </div>
                </div>
            </div>
            {% if run %}
                <div class="w-full flex flex-col order-2 relative" id="code_output" style="height: {{ editorHeight }}">
                      <!-- tabindex=0 makes the div focusable -->
                      <div id="output" tabindex=0 class="flex-1 rounded p-2 px-3 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem;"></div>
                      <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
                      <div id="inline_modal" class="flex-0">
                        <div id="ask_modal"
                             class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100" style="display: none">
                        <!--Title-->
                            <div class="flex justify-between items-center">
                            <p class="text-2xl font-bold caption">Header</p>
                        </div>
                        <!--Body-->
                        <!--Body-->
                        <form>
                            <div class="my-2 flex">
                                <input type="text" class="border border-green-400 rounded p-2 px-3 flex-1" placeholder="{{_('enter_text')}}">
                                <input type="submit" class="flex-0 green-btn ltr:ml-3 rtl:mr-3" value="{{_('enter')}}"></p>
                            </div>
                        </form>
                    </div>
                    <div id="keybinding_modal"
                         class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100" style="display: none;z-index: 99; position: absolute; bottom: 0; width: 100%;">
                      <!--Title-->
                      <div class="flex justify-between items-center">
                        <p class="text-2xl font-bold caption">{{_('keybinding_waiting_for_keypress')}}</p>
                      </div>
                    </div>
                  </div>
                  <div id="dynamic_buttons" class="flex mt-3 gap-2 overflow-auto border-4 border-blue-600 rounded bg-blue-300 py-2 px-3" style="display: none">
                  </div>
                </div>
            {% endif %}
        </div>
        {% if run %}
            <div class="h-12" id="code_related_buttons">
              <div class="flex justify-between gap-2 items-start h-12 overflow-visible">
                <div id="run_button_container">
                  <button id="runit" class="green-btn" onclick='hedyApp.runit({{ level }}, "{{ language }}", false, {{_('already_program_running')|default(None)|tojson}}, "run")'>{{_('run_code_button')}} </button>
                  <button id="stopit" class="red-btn" onclick="hedyApp.stopit()" style="display: none;">{{_('stop_code_button')}}</button>
                </div>
              </div>
            </div>
        {% endif %}
        {% block scripts %}
            <script src="{{static('/vendor/jquery.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
            <script src="{{static('/vendor/htmx-2.0.3.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
            <script src="{{static('/vendor/hyperscript-0.9.8.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
            <script src="{{static('/vendor/skulpt.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
            <script src="{{static('/vendor/skulpt-stdlib.js')}}" type="text/javascript" crossorigin="anonymous"></script>                       
            <script src="{{static('/js/appbundle.js')}}" type="text/javascript" crossorigin="anonymous"></script>
        {% block additional_scripts %}{% endblock %}
        <script>
            hedyApp.initialize({
              lang: '{{ language }}',
              level:  '{{  level }}',
              keyword_language: '{{ keyword_language }}',
              staticRoot: {{ static('')|tojson|safe }},
              javascriptPageOptions: {{ javascript_page_options|tojson|safe }},
            })

            // Remove all console logs as these messages might clutter the log of the parent site
            console.log = function () {};
            console.dir = function () {};
            console.debug = function () {};

            // Dynamically add the gutter to the editor when readOnly
            {% if readOnly %}
                hedyApp.theGlobalEditor.isReadOnly = true;
            {% endif %}

            // Listen to message from the host to dynamically toggle readOnly mode
            window.addEventListener('message', function (message) {
                if (message.data.mode) {
                    if (message.data.mode == 'read') {
                        hedyApp.theGlobalEditor.isReadOnly = true;
                    } else if (message.data.mode == 'edit') {
                        hedyApp.theGlobalEditor.isReadOnly = false;
                    }
                }
            });

            // We need a work-around to allow listening to events from outside the embedded editor
            function sendRunEvent() {
              window.parent.postMessage({
                  'run': true,
                  'program': hedyApp.get_active_and_trimmed_code()
              }, '*');
            }

            // When sending a change event, send without removing trailing space to fix weird behaviour
            function sendChangeEvent() {
                window.parent.postMessage({
                    'change': true,
                    'program': hedyApp.getEditorContents()
                }, '*')
            }

            hedyApp.theGlobalEditor.on('change', function() {
               sendChangeEvent();
            });

            $('#runit').on('click', function() {
                sendRunEvent();
            });
        </script>
        {% endblock %}
    </body>
</html>
